<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>
.a{
height:50px;
width:200px;
border:1px solid #ccc;
background-color:#eee;

}

.b{
height:50px;
border:1px solid #ccc;
background-color:red;

}
	</style>
	
	</head>
<body style="margin:200px">





<nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">标题</a> </div>


<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>
<!--套表单--->
<form action="" class="navbar-form navbar-right"> <div class="input-group">

<input type="text" class="form-control"> <span class="input-group-btn">

<button type="submit" class="btn btn-default">提交</button> </span>

</div>

</form>
<!--套表单--->

<button class="btn btn-default navbar-btn navbar-left">按钮</button>
<p class="navbar-text">我是一段文本<a href="#" class="navbar-link">---这是非导航链接---</a></p>
</div>

</nav>



<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">/面包屑导航 </p>
<ol class="breadcrumb">

<li><a href="#">首页</a></li> <li><a href="#">产品列表</a></li>

<li class="active">韩版 2015 年羊绒毛衣</li> </ol>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">二．分页组件 </p>

<ul class="pagination">

<li><a href="#">&laquo;</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">&raquo;</a></li>

</ul>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">二．分页组件 </p>

<ul class="pagination">

<li><a href="#">&laquo;</a></li>
 <li class="active"><a href="#">1</a></li> 
 <li><a href="#">2</a></li> 
 <li><a href="#">3</a></li> 
 <li class="disabled"><a href="#">禁用页</a></li> 
 <li><a href="#">5</a></li> 
 <li><a href="#">&raquo;</a></li>

</ul>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">二．分页组件 大号 //设置尺寸，四种 lg、默认、sm 和 xs  </p>

<ul class="pagination pagination-lg ">

<li><a href="#">&laquo;</a></li>
 <li class="active"><a href="#">1</a></li> 
 <li><a href="#">2</a></li> 
 <li><a href="#">3</a></li> 
 <li class="disabled"><a href="#">禁用页</a></li> 
 <li><a href="#">5</a></li> 
 <li><a href="#">&raquo;</a></li>

</ul>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center"> //翻页效果</p>
<ul class="pager">

<li><a href="#">上一页</a></li>
 <li><a href="#">下一页</a></li>

</ul>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center"> //对齐翻页链接</p>
<ul class="pager">

<li class="previous"><a href="#">上一页</a></li> <li class="next"><a href="#">下一页</a></li>

</ul>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center"> //在文本后面带上标签</p>

<h3>标签 <span class="label label-default">new</span></h3>
<h6>标签 <span class="label label-default">标签：最新消息</span></h6>
//不同色调的标签

<h3>标签 <span class="label label-primary">new</span></h3> <h3>标签 <span class="label label-success">new</span></h3> <h3>标签 <span class="label label-info">new</span></h3> <h3>标签 <span class="label label-warning">new</span></h3> <h3>标签 <span class="label label-danger">new</span></h3>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center"> //未读信息数量徽章</p>
<a href="#">信息 <span class="badge">10</span></a>
<br/>
//按钮中使用徽章

<button class="btn btn-success">

提交 <span class="badge">3</span> </button>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">//激活状态自动适配色调</p>
<ul class="nav nav-pills">

<li class="active">

<a href="#">首页 <span class="badge">2</span></a> </li>

<li><a href="#">资讯</a></li> </ul>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">实现简单的嵌入效果。</p>

<div class="well">

Bootstrap

</div>
<br/>
<div class="well well-lg">

Bootstrap

</div>
<br/>
<div class="well well-sm">

Bootstrap

</div>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">进度条组件为当前工作流程或动作提供时时反馈。</p>

<div class="progress">

<div class="progress-bar" style="width: 60%;">60%</div> </div>

<br/>
<div class="progress">

<div class="progress-bar" style="min-width:20px">0%</div> </div>

<br/>
<div class="progress">

<div class="progress-bar progress-bar-success" style="min-width:20px;width:60%">60%</div>

</div>

<br/>
<div class="progress">

<div class="progress-bar progress-bar-success progress-bar-striped" style="min-width:20px;width:60%">60%</div>

</div>

<br/>

<div class="progress">

<div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:20px;width:60%">60%</div>

</div>
<br/>
<div class="progress">

<div class="progress-bar progress-bar-success" style="min-width:20px;width:35%">35%</div>

<div class="progress-bar progress-bar-warning" style="min-width:20px;width:20%">20%</div>

<div class="progress-bar progress-bar-danger" style="min-width:20px;width:10%">10%</div>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">媒体对象组件。</p>


<div class="media">

<div class="media-left media-middle">

<img src="__ROOT__/static/note/img/7.jpg" alt="" class="media-object"> </div>

<div class="media-body">

<h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
</div>

</div>

<div class="media">

<div class="media-left">

<img src="__ROOT__/static/note/img/7.jpg" alt="" class="media-object"> </div>

<div class="media-body">

<h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
</div>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">注意 第二个更靠右</p>


<div class="media">

<div class="media-body">

<h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
</div>


<div class="media-left">

<img src="__ROOT__/static/note/img/7.jpg" alt="" class="media-object"> </div>



</div>

<div class="media">

<div class="media-body">

<h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
</div>


<div class="media-right">

<img src="__ROOT__/static/note/img/7.jpg" alt="" class="media-object"> </div>



</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">媒体对象列表</p>


<ul class="media-list">
<li class="media">
<div class="media-left">

<img src="__ROOT__/static/note/img/7.jpg" alt="" class="media-object"> </div>

<div class="media-body">

<h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p>

<div class="media">
<div class="media-left">

<img src="__ROOT__/static/note/img/7.jpg" alt="" class="media-object"> </div>

<div class="media-body">

<h4 class="media-heading">回复</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
</div>
</div>



</div>
</li>

<li class="media">
<div class="media-left">

<img src="__ROOT__/static/note/img/7.jpg" alt="" class="media-object"> </div>

<div class="media-body">

<h4 class="media-heading">标题</h4> <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老
的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17 种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
</div>
</li>

</ul>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">列表组</p>

<ul class="list-group">

<li class="list-group-item">1.这是起始</li>

<li class="list-group-item">2.这是第二条数据</li> 
<li class="list-group-item">3.这是第三排信息 <span class="badge">10</span></li>
 <li class="list-group-item">4.这是末尾</li>

</ul>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">有连接功能的列表组</p>

<div class="list-group">

<a href="#" class="list-group-item active">1.这是起始

<span class="badge">10</span></a> <a href="#" class="list-group-item">2.这是第二条数据</a>

<a href="#" class="list-group-item">3.这是第三排信息</a> <a href="#" class="list-group-item">4.这是末尾</a>

</div>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">按钮式列表</p>
<div class="list-group">

<button class="list-group-item active">1.这是起始 <span class="badge">10</span></button>

<button class="list-group-item">2.这是第二条数据</button>
 <button class="list-group-item">3.这是第三排信息</button> 
 <button class="list-group-item">4.这是末尾</button>
</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">情景类</p>

<div class="list-group">

<a href="#" class="list-group-item active">1.这是起始

<span class="badge">10</span></a> 
<a href="#" class="list-group-item">2.这是第二条数据
<h4>列表标题</h4>
<p>详细内容</p>

</a>

<a href="#" class="list-group-item">3.这是第三排信息</a> 

<a href="#" class="list-group-item">4.这是末尾</a>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">//定制内容</p>

<div class="list-group">

<a href="#" class="list-group-item active"> <h4>内容标题</h4> <p class="list-group-item-text">这里是相关内容详情！</p>
</a>

<a href="#" class="list-group-item"> <h4>内容标题</h4>

<p class="list-group-item-text">这里是相关内容详情！</p> </a>
<a href="#" class="list-group-item"> <h4>内容标题</h4>

<p class="list-group-item-text">这里是相关内容详情！</p> </a>
</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">面板组件</p>

<div class="panel panel-default"> <div class="panel-heading">
面板标题

</div>

<div class="panel-body">

这里是详细内容区！

</div>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">面板组件</p>

<div class="panel panel-default"> <div class="panel-heading">
<h3>面板标题</h3>

</div>

<div class="panel-body">

这里是详细内容区！

</div>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">面板组件</p>

<div class="panel panel-default"> <div class="panel-heading">
<h3 class="panel-title" >面板标题 加class="panel-title" </h3>

</div>

<div class="panel-body">

这里是详细内容区！

</div>
<div class="panel-footer">

这里是底部

</div>
</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">面板组件 情景类default、success、info、warning、danger、primary</p>

<div class="panel panel-danger"> 
<div class="panel-heading">
<h3 class="panel-title" >面板标题 加class="panel-title"  </h3>

</div>

<div class="panel-body">

这里是详细内容区！

</div>
<div class="panel-footer">

这里是底部

</div>
</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">面板组件 表格</p>
<div class="panel panel-default"> <div class="panel-heading">
表格标题

</div>

<div class="panel-body">

<p>这里是表格标题的详细内容！</p> </div>
<table class="table"> <tr>

<th>1</th>

<th>2</th>

<th>3</th>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

</table>

<ul class="list-group">


<li class="list-group-item">1.这里是首页</li>

<li class="list-group-item">2.这里是第二个项目</li> <li class="list-group-item">3.这里是第三个项目</li> <li class="list-group-item">4.这里是第四个项目</li>

</ul>


<div class="panel-footer">

这里是底部

</div>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">媒体响应16：9</p>

<div class="embed-responsive embed-responsive-16by9"> 
<embed width="100%" height="100%"

src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>

</div>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">媒体响应 4：3</p>

<div class="embed-responsive embed-responsive-4by3"> <embed width="100%" height="100%"

src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>

</div>





















<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>

</body>
</html>